<template>
  <div class="product">
    <!-- 横向排列 -->
    <h1>流量榜前5</h1>
    <!-- <ul>
        <li>
            <img src="../../assets/img/1.jpg" alt=""/>
            <span>缤纷彩虹曲奇饼</span>
        </li>
        <li>
            <img src="../../assets/img/2.jpg" alt=""/>
            <span>女士单肩手提包</span>
        </li>
        <li>
            <img src="../../assets/img/3.jpg" alt=""/>
            <span>berko蛋糕</span>
        </li>
        <li>
            <img src="../../assets/img/4.jpg" alt=""/>
            <span>巧克力甜甜圈</span>
        </li>
        <li>
            <img src="../../assets/img/5.jpg" alt=""/>
            <span>室内小盆绿植盆栽</span>
        </li>
    </ul> -->
    <ul>
        <!-- 改为动态渲染 -->
        <li v-for="item in topVisits" :key="item.id">
          <span>热度：{{item.visits}}</span>
            <img :src="require('@/assets/' + item.imgURL)" alt=""/>
            <span>{{ item.title }}</span>
        </li>
    </ul>

    <!-- 选项卡 -->
    <div class="cursor">
        <!-- 按钮区域 -->
        <div class="btnlist">
        <button @click="sortBySale">
          畅销榜
        </button>
        <button @click="sortByHot">
          热量榜
        </button>
        </div>

        <!--展示区 -->
        <table border="1" cellpadding="" cellspacing="0">
            <tr>
                <th>序号</th>
                <th>商品名称</th>
                <th>图片</th>
                <th>时间</th>
                
                <th>热量</th>
                <th>销售</th>
                <th>访客</th>
            </tr>
            <tr v-for="(item,index) in sortedList" :key="index">
                <th>{{item.id}}</th>
                <th>{{item.title}}</th>
                <th><img :src="require('@/assets/' + item.imgURL)" height="150" width="200" /></th>
                <th>{{formatTime(item.createTime)}}</th>
                
                <th>{{item.hot}}</th>
                <th>{{item.sale}}</th>
                <th>{{item.visits}}</th>
            </tr>
        </table>

    </div>
  </div>
</template>

<script>
import imgData from '@/assets/index.js';

export default {
    name: 'ProductList',
    data(){
        return{
            ImgList: imgData.ImgList,
            sortField: null, 
            sortDirection: 1 
        };
    },
    computed:{
        //隐藏下架商品
        filteredList() {
            return this.ImgList.filter(item => item.grounding);
        },
        sortedList(){ 
            return [...this.filteredList].sort((a, b) => {
              if (!this.sortField) return 0;
              return (b[this.sortField] - a[this.sortField]) * this.sortDirection;
            });
        },
        //流量前5
        topVisits() {
            return [...this.filteredList]
                .sort((a, b) => b.visits - a.visits)
                .slice(0, 5);
        }
    },
    methods: {
        formatTime(timestamp) {
            const date = new Date(timestamp * 1000);
            return date.toLocaleString();
        },
        sortBySale() {
            if (this.sortField === 'sale') {
                this.sortDirection *= -1;
            } else {
                this.sortField = 'sale';
                this.sortDirection = 1;
            }
        },
        sortByHot() {
            if (this.sortField === 'hot') {
                this.sortDirection *= -1;
            } else {
                this.sortField = 'hot';
                this.sortDirection = 1;
            }
        }
    }
}
</script>

<style scoped>
.product{
    width: 100%;
    height: calc(100vh - 100px );
    overflow-y: auto;
}
.product th{
  width: 150px;
}
.product ul{
    width: 95%;
    height: 210px;
    margin: 30px auto;

    display: flex;
    justify-content: space-between;
    align-items: center;
}
.product ul li{
    width: 19%;
    height: 100%;
    background-color: rgba(254, 154, 54, 0.7);
    text-align: center;
}
.product ul li  aside{
    position: absolute;
    right: 0;
    top: 0;
}
.product ul li img{
    width: 85%;
    height: 50%;
    margin-top: 20px;
}
.product ul li span{
    display: block;
    width: 100%;
    margin-top: 8px;
}
.product table{
  width: 100%;
}
.product .cursor{
    width: 95%;
    overflow: hidden;
    margin: 0 auto;
    background-color: rgba(254, 154, 54, 0.7);
}
.product .cursor .btnlist button{
    border:none;
    background-color: rgba(254, 154, 54, 0.7);
    border: 1px solid rgb(254, 154, 54);
    color: white;
    width: 200px;
    height: 50px;
}
.product .cursor .btnlist button.active{
    background-color: white;
    color: orange;
    border: 1px solid gold;
}
</style>